import React from 'react'
import {Route, Switch} from 'react-router-dom'
import {Container} from '../../ui/layout/Container'
import Header from '../components/common/Header'
import {Footer} from '../components/common/Footer'
import MainContainer from './menu/MainContainer'
import CartContainer from './cart/CartContainer'
import ProfileContainer from './profile/ProfileContainer'
import OrderHistoryContainer from './orderHistory/OrderHistoryContainer'
import OrderInfoContainer from './orderHistory/OrderInfoContainer'

const MainLayout: React.FC<{}> = (): React.ReactElement => {
  return (
    <div className={'content'}>
      <Header isLogin />
      <Container className={'content-body'} size={'normal'}>
        <Switch>
          <Route path={'/order-history/:orderId'} component={OrderInfoContainer} />
          <Route path={'/order-history'} component={OrderHistoryContainer} />
          <Route path={'/cart'} component={CartContainer} />
          <Route path={'/profile'} component={ProfileContainer} />
          <Route path={'/'} component={MainContainer} />
        </Switch>
      </Container>
      <Footer />
    </div>
  )
}

export default MainLayout
